﻿@model CTM.Web.Models.View.Role.RoleViewModel

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
}

<h2>Edit</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>@Model.Name</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @*@Html.HiddenFor(model => model.Id)*@
        @Html.HiddenFor(model => model.OriginalName)

        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-8">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.Label("Users", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-8">
                <input id="txtSelectedUsers" name="SelectedUsers" class="form-control" type="text" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section scripts {
    <script>
        $(function () {

            // Necessary scripts for Bootstrap Tags Input
            var associates1 = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '@Url.Action("SearchAssociates", "Home")' + '?q=%QUERY',
                    wildcard: '%QUERY',
                    filter: function (list) {
                        return $.map(list, function (user) {
                            return { name: user.DisplayName, value: user.Id };
                        });
                    }
                }
            });
            associates1.initialize();

            $('#txtSelectedUsers').tagsinput({
                itemValue: 'value',
                itemText: 'name',
                typeaheadjs: {
                    name: 'associates1',
                    displayKey: 'name',
                    source: associates1.ttAdapter()
                }
            });

            // load current tags
            $('#txtSelectedUsers').tagsinput('removeAll');

            var currentUsers = @Html.Raw(serializer.Serialize(Model.CurrentUsers));
            for (var i = 0; i < currentUsers.length; i++) {
                $('#txtSelectedUsers').tagsinput('add', { name: currentUsers[i].DisplayName, value: currentUsers[i].Id });
            }

        });
    </script>
}